<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.global.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const { createApp } = window.Vue
  const objs = {}
  const track = (obj, key) => {
    objs[key] = obj[key]
  }
  const trigger = (obj, key, value) => {
    objs[key] = value
  }
  const app = createApp({
    setup(props) {
      const count = {
        value: 100,
        x: 200,
        list: ['a', 'b']
      }

      const handler = {
        get (obj, key) {
          // return obj[key]
          track(obj, key)
          Reflect.get(...arguments)
          return obj[key]
        },
        set (obj, key, value) {
          trigger(obj, key, value)
          Reflect.set(...arguments)
        }
      }
      // Proxy 是一个对象，它包装了另一个对象，并允许你拦截对该对象的任何交互
      const proxy = new Proxy(count, handler)

      proxy.value // getter
      proxy.x // getter
      proxy.list
      console.log(objs) // {value: 100, x: 200}

      proxy.value = 1000 // setter
      proxy.list[0] = 'aaaa'
      console.log(objs) // {value: 1000, x: 200}

      return () => () => {} 
    }
  })
  app.mount('#root')
</script>
</html>